import { EChartsOption } from 'echarts'
import echarts from '@/plugins/echarts'

export interface ProductListType {
  orderNumber: string
  dictOrderType: number
  customerCode: string
  productNumber: string
  productName: string
  productStandard: string
  planStartDate: string
  planEndDate: string
  planProgress: number
  actualProgress: number
  status: string
}

export const barOptions: EChartsOption = {
  backgroundColor: '#0D202A',
  tooltip: {
    show: false,
  },
  grid: {
    left: 50,
    right: 50,
    bottom: 20,
  },
  xAxis: [{
    type: 'time',
    position: 'top',
    splitLine: {
      show: false
    },
    axisLabel: {
      margin: 6,
      formatter: '{yyyy}.{MM}·{dd}',
      color: '#7CC9C2',
      fontSize: 16,
      align: 'center',
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#DCDFE7',
        width: 18,
      },
    },
    axisTick: {
      show: false,
    },
    splitArea: {
      show: false,
    },
  }],
  yAxis: {
    type: 'category',
    name: '工序名称',
    nameTextStyle: {
      color: '#7CC9C2',
      fontSize: 16,
      padding: [0, 30, 20, 0],
    },
    axisLabel: {
      show: true,
      color: '#fff',
      fontSize: 18,
    },
    axisLine: {
      lineStyle: {
        color: '#16393D'
      }
    },
    axisTick: {
      show: false
    },
  },
  series: [
    {
      name: '开始时间',
      type: 'bar',
      stack: '总量',
      barMaxWidth: 24,
      itemStyle: {
        color: '#0D202A',
        borderColor: '#0D202A'
      },
      zlevel: 10,
      data: []
    },
    {
      name: '结束时间',
      type: 'bar',
      stack: '总量',
      barMaxWidth: 24,
      itemStyle: {
        color: '#1E484F'
      },
      zlevel: 1,
      data: []
    },
    {
      name: '实际时间',
      type: 'bar',
      stack: '总量',
      barMaxWidth: 24,
      zlevel: 5,
      data: []
    }
  ]
}

export const lineOptions: EChartsOption = {
  tooltip: {
    show: false,
  },
  grid: {
    left: 50,
    right: 50,
    bottom: 30,
    top: 20
  },
  xAxis: {
    type: 'category',
    splitLine: {
      show: false
    },
    axisLabel: {
      margin: 6,
      color: '#fff',
      fontSize: 12,
      opacity: 0.4
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#DCDFE7',
        width: 18,
      },
    },
    axisTick: {
      show: false,
    },
    splitArea: {
      show: false,
    },
    data: []
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      show: true,
      color: '#fff',
      fontSize: 10,
      opacity: 0.4,
      formatter: function(value) {
        return `${value}%`
      }
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#16393D'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#6CFFFB',
        opacity: 0.2
      }
    },
    axisTick: {
      show: false
    },
  },
  series: [
    {
      name: '七日完工率',
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#21E6E1',
        width: 2
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: 'rgba(22,31,31,0.00)'
        },{
          offset: 1,
          color: '#21e6e1'
        }]), 
      },
      zlevel: 10,
      data: []
    },
  ]
}